Pencil UI 设计

课程导读

这节课介绍如何用 Pencil 配合 Claude Code 做 UI 设计。核心流程是：先生成设计稿，再基于设计稿进入代码开发。

一、安装 Pencil

Pencil 是一个 UI 设计工具，可以和 Claude Code 配合生成和修改设计稿。

Pencil 官网

安装完成后，Pencil 通常会自动配置好 MCP。

Claude Code 可以通过 MCP 连接 Pencil，在 Pencil 文件里创建和修改设计稿。

如果 MCP 没有配置成功，可以在 Pencil 的设置界面复制配置内容，再发给 Claude Code，让它帮你完成配置。

二、Pencil 的基础用法

1. 使用内置组件库

切换到 Libraries，可以看到 Pencil 内置的一些设计库。

添加设计库后，对应组件会出现在 Components 里。

常见组件包括：

• 按钮。
• 输入框。
• 卡片。
• 导航栏。
• 表单元素。

可以把组件拖到画布上，再根据需求拼成页面。

这种方式更接近传统设计工具，也比较适合设计师。

2. 手动调整样式

选中某个组件后，右侧会出现属性面板。

可以调整：

• 宽高。
• 颜色。
• 字体大小。
• 圆角。
• 间距。
• 对齐方式。

整体体验和 Figma 比较像。

3. 让 AI 修改选中元素

除了手动调整，也可以选中一个元素，然后在左下角对话框里直接告诉 AI 要怎么改。

Pencil 会根据当前选中内容进行修改。

执行过程中，画布上可能会出现子代理的光标和名称，可以直观看到 AI 正在操作哪个区域。

三、直接让 Pencil 生成设计稿

Pencil 也可以直接用 AI 生成完整设计稿。

常见流程如下：

1. 新建或打开一个 .pen 文件。
2. 在对话框中选择一个 style。
3. 输入具体需求。
4. 根据任务复杂度调整子代理数量。
5. 等待 Pencil 生成设计稿。

也可以直接拖动元素，手动修改位置和布局。

四、让 Claude Code 操作 Pencil

先在项目目录中新建一个 Pencil 文件：

demo.pen

然后用 Pencil 打开这个文件。

接下来回到 Claude Code，输入需求。

Claude Code 会主动调用 Pencil MCP，并在当前 .pen 文件里创建设计稿。

注意

Claude Code 正在通过 MCP 修改 Pencil 文件时，尽量不要同时手动修改同一个文件。

否则可能会影响它的执行结果

五、使用 DESIGN.md 控制设计风格

如果想模仿某个产品或品牌的设计风格，可以使用 DESIGN.md。

DESIGN.md 是一份给 AI 阅读的设计规范文件。

它会用文字整理出一个产品的视觉风格、配色、字体、组件规则和布局原则。

get design.md

也可以参考这个 DESIGN.md 合集：

Awesome DESIGN.md

1. 下载 DESIGN.md

在 get design.md 页面里选择一个设计风格。

页面会提供对应的安装命令。

例如：

npx getdesign@latest add claude

执行命令后，会把 DESIGN.md 下载到当前项目中。

2. 使用 DESIGN.md 重新设计页面

回到 Claude Code，把 DESIGN.md 引用进来，再提出需求。

例如：

请参考这个 DESIGN.md 的设计规范，重新设计当前 Pencil 文件里的页面。

Claude Code 会根据这套设计规范重新生成设计稿。

六、局部修改设计稿

设计稿生成后，通常还需要做一些局部调整。

1. 直接选中元素修改

可以在 Pencil 里选中某个元素，然后告诉 Claude Code：

把我选中的这段文字改成一行显示。

因为 Claude Code 通过 MCP 连接到了 Pencil，所以它可以知道当前选中的元素。

2. 复制节点 ID 修改

也可以选中元素后，按：

Command/Ctrl + C

然后回到 Claude Code 中粘贴。

这时通常会粘贴出一个节点 ID。

Claude Code 可以通过这个节点 ID 精准定位元素。

这种方式适合一次性复制多个元素 ID，然后让 Claude Code 同时调整多个位置。

七、从设计稿生成代码

当设计稿确认没问题后，就可以让 Claude Code 基于设计稿生成代码。

示例提示词：

请根据当前 Pencil 设计稿生成代码，要求高还原度，尽量 1:1 复刻设计稿，并实现必要的交互响应动效。

开发完成后，Claude Code 可能会调用 Playwright 打开页面并测试效果。

这时候可以检查：

• 页面是否成功打开。
• 样式是否接近设计稿。
• 交互动效是否正常。
• 桌面端和移动端是否都能正常显示。

八、沉淀成 UI 设计子代理

如果后续经常用 Pencil 做 UI 设计，可以创建一个专门的子代理。

进入子代理管理界面：

/agents

然后创建新的子代理。

示例提示词：

你是一名专门使用 Pencil 的界面设计 subagent。

你的定位：

你始终围绕当前已打开的 .pen 文件工作，而不是脱离设计文件单独给建议。这个 .pen 文件可能是空白的，也可能已经有现有设计稿。你的默认执行方式是优先使用当前会话可用的 Pencil MCP，直接在该文件中完成设计和修改。

你的职责：

* 在当前空白的 .pen 文件中，根据需求从零开始设计页面
* 在已有设计稿的 .pen 文件中继续修改、完善和扩展页面
* 按照 design.md 或用户指定的 style 确定页面视觉风格
* 对选中区域做局部优化、重构和细化
* 如果在当前设计基础上生成移动端适配版本
* 如果当前设计目标是网站或网页产品，默认考虑移动端适配

你的工作方式：

* 先判断当前 .pen 文件是空白还是已有内容，再决定是从零设计还是在原稿基础上修改
* 先理解页面目标、用户场景和信息层级，再决定布局和视觉风格
* 如果需求不完整，先补全合理的页面结构和必要模块
* 默认使用 Pencil MCP 直接完成设计
* 如果项目中存在 design.md，默认将其作为主要风格依据
* 如果用户明确指定了 style，则优先按照指定 style 进行设计
* 如果既没有 design.md，也没有明确 style，则自行补全一个统一、合理、有设计感的视觉方向

九、补充：从 Figma 查找设计参考

除了 DESIGN.md，也可以从 Figma Community 查找现成设计稿或设计元件。

Figma Community 设计模板

例如可以搜索：

• App UI Kit。
• 登录页模板。
• Dashboard 模板。
• Instagram UI Kit。

找到合适的设计稿后，可以作为参考，再让 Claude Code 和 Pencil 按这个方向生成自己的页面。